<template>
	<div class="artcle_Search">
		<div class="container"  v-loading="loading" element-loading-text="请喝杯咖啡稍等一下,正在加载中"
	 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-header>
				<div class="handle-box">
					<div style="float: left;">
						<el-input v-model="select_word" placeholder="请输入关键词" class="handle-input mr10"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					</div>
					<!-- <div align="right">
						<el-radio-group v-model="labelPosition" size="small">
							<el-radio-button label="left">默认</el-radio-button>
							<el-radio-button label="right">按照访问量</el-radio-button>
							<el-radio-button label="top">更新时间</el-radio-button>
						</el-radio-group>
					</div> -->
				</div>
			</el-header>
			<el-main >
				<el-col v-for="articleItem in articleListData" :key="articleItem.article_id">
					<el-card class="box-card" style="margin: 0px;border-radius:10px">
						<div slot="header" class="clearfix">
							<span> <b>{{articleItem.title}}</b></span>
							<div style="float: right;">
								<i class="el-icon-delete" style="margin-right: 5px;" @click="handleDelete(articleItem)"></i>
							</div>
						<!-- 	<div style="font-size: small;margin-left: 20px;font-weight: bolder;">摘要--{{articleItem.summary}}</div> -->
							<div class="ql-editor articleTextStyle" v-html="articleItem.summary"></div>
						</div>
						<div class="text item">
							<span>
								<i class="el-icon-time"></i>{{articleItem.article_time | formatDate}}
							</span>
							<span style="float: right; ">
								<i class="el-icon-view" style="margin-right: 5px;" @click="openSearch(articleItem)"></i>
								<i class="el-icon-edit" style="margin-right: 5px;" @click="openEdit(articleItem)"></i>
							</span>
						</div>
					</el-card>

				</el-col>
			</el-main>
			<el-footer>
				<div class="pagination">
					<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_page"
					 :size="rows_page">
					</el-pagination>
				</div>
			</el-footer>
		</div>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import bus from '../../common/bus';
	import {
		constHelp
	} from '../../common/contant';
	import common from '../../common/common.js'
	export default {
		name: 'article_Search',
		data() {
			return {
				"select_word": "",
				articleListData: [],
				cur_page: 1,
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list', // 获取文章列表
					update_delete_flag_article: constHelp['WEBAPIURL'] + '/blogManage/update_delete_flag_article', // 更新文章标记为删除update_delete_flag_article
				},
				labelPosition: 0,
				total_page: 0,
				rows_page: 10,
				loading: true,
				delVisible: false, //删除标记
				deleteItem: {},
				userInfo:{},
			}
		},
		created() {
			let userInfo_string = localStorage.getItem("UserInfo");
			if (!common.IsNull(userInfo_string)) {
				this.userInfo = JSON.parse(userInfo_string);
			}
			this.get_article_list();
		},
		filters: {
			// 日期格式化L
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		methods: {
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.get_article_list();
			},

			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list, {
					page_index: this.cur_page,
					page_size: this.rows_page,
					select_word: this.select_word,
					user_id:this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.loading=false;
						this.articleListData = res.data.data;
						this.total_page=res.data.total
					}
				})
			},
			handleDelete(item) {
				this.deleteItem = item;
				this.delVisible = true;
			},
			// 确定删除
			deleteRow() {
				this.$message.success('删除成功');
				this.delVisible = false;

				this.$axios.post(this.url.update_delete_flag_article,
					this.deleteItem, {
						withCredentials: true
					}).then((res) => {
					this.get_article_list();
				})
			},
			openSearch(articleItem) {
				this.$router.push({
					path: '/ArticleWebContent',
					name: 'ArticleWebContent',
					params: articleItem
				})
			},
			openEdit(articleItem) {
				this.$router.push({
					path: '/WriteArticles',
					name: 'WriteArticles',
					params: articleItem
				})
			},
			search() {
						this.loading=true;
				this.get_article_list();
			}
		}
	}
</script>
<style scoped>
	.articleTextStyle {
		max-height: 80px;
		overflow: hidden;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}
</style>
